<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 1. 定义 ref
const pRef = ref(null)

// 3. onMounted 获取
onMounted(() => {
  // onMounted 中是最早可以获取到 dom 元素的生命周期函数
  // document.querySelector('p')

  // 非空断言 + as 类型强转
  ;(pRef.value! as HTMLParagraphElement).style.backgroundColor = 'pink'
  const p = pRef.value! as HTMLParagraphElement
  p.innerHTML = '123'
})
</script>

<template>
  <!-- 2. 设置给 dom 元素 -->
  <!-- ref="xxx"  xxx 需要和定义的状态变量同名 -->
  <p ref="pRef">肯德基</p>
</template>

<style></style>
